<template>
  <div class="dashboard-container">
    <ul class="box">
      <li>
        <span
          class="el-icon-user-solid"
          style="
            color: #57c9c6;
            width: 100px;
            font-size: 72px;
            margin-left: 29px;
            margin-top: 15px;
          "
        ></span>
        <div class="num">
          <p>用户数量</p>
          {{ userTotal }}
        </div>
      </li>
      <li>
        <span
          class="el-icon-chat-dot-square"
          style="
            color: #599ff9;
            width: 100px;
            font-size: 72px;
            margin-left: 29px;
            margin-top: 15px;
          "
        ></span>
        <div class="num">
          <p>商品数量</p>
          {{ goodsTotal }}
        </div>
      </li>
      <li>
        <span
          class="el-icon-chat-dot-square"
          style="
            color: #ec506d;
            width: 100px;
            font-size: 72px;
            margin-left: 29px;
            margin-top: 15px;
          "
        ></span>
        <div class="num">
          <p>货品数量</p>
          {{ productTotal }}
        </div>
      </li>
      <li>
        <span
          class="el-icon-key"
          style="
            color: #48c0a2;
            width: 100px;
            font-size: 72px;
            margin-left: 29px;
            margin-top: 15px;
          "
        ></span>
        <div class="num">
          <p>订单数量</p>
          {{ orderTotal }}
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { home } from "@/api/shouye/shouye.js";

export default {
  // name: '首页',
  data() {
    return {
      userTotal: null,
      goodsTotal: null,
      productTotal: null,
      orderTotal: null,
    };
  },
  computed: {
    ...mapGetters(["name"]),
  },
  methods: {},
  mounted() {
    home()
      .then((res) => {
        console.log(res);
        this.userTotal = res.data.userTotal;
        this.goodsTotal = res.data.goodsTotal;
        this.productTotal = res.data.productTotal;
        this.orderTotal = res.data.orderTotal;
      })
      .catch((error) => {
        console.error("请求出错:", error);
      });
  },
};
</script>

<style lang="scss" scoped>
/* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
@font-face {
  font-family: "iconfont"; /* Project id 4836409 */
  src: url("//at.alicdn.com/t/c/font_4836409_da32iear6t.woff2?t=1740367452922")
      format("woff2"),
    url("//at.alicdn.com/t/c/font_4836409_da32iear6t.woff?t=1740367452922")
      format("woff"),
    url("//at.alicdn.com/t/c/font_4836409_da32iear6t.ttf?t=1740367452922")
      format("truetype");
}
.dashboard {
  &-container {
    margin-top: -15px;
  }
}
.box {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  flex-wrap: nowrap;
  height: 240px;
  width: 100%;
  background: #f0f2f5;
  li {
    width: 274px;
    height: 110px;
    // background: #ff0000;
    // border-radius: 5px;
    list-style: none;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
  }
}
.num {
  width: 100px;
  height: 100px;
  margin-left: 173px;
  margin-top: -75px;
  color: #000;
  font-size: 20px;
  p{
    line-height: 18px;
    color: rgba(0, 0, 0, 0.45);
    font-size: 16px;
    margin-bottom: 12px;
  }
  font-weight: 600;
}
.box li[data-v-106c86ed] {
  width: 274px;
  height: 110px;
  // border-radius: 5px;
  list-style: none;
  margin-left: -39px;
  background: #ffffff;
  margin-top: 60px;
}
img {
  width: 100px;
  height: 100px;
}
</style>